<!DOCTYPE html>
<html>
<head> 
<title>gridTemplate - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">

<link href="../src/gridTemplate/gridTemplate.pagination.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="./lib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./lib/artTemplate/template.js"></script>
<script type="text/javascript" charset="utf-8" src="../src/gridTemplate/jquery.gridTemplate.js"></script>
</head>

<body >
 
<div id="tableContainer">
		 
</div>
<script id="tableTmpl" type="text/html"> 
      <!--列表-->
		<div>
		
			<table width="100%" border="0" cellspacing="0" cellpadding="0" >
			   <tr>
               <th width="8%">ID</th>
               	<th align="left" width="12%">名称</th>
               	<th align="left" width="12%">数量</th>
               	<th width="8%">是否可用</th>
               </tr>
            {{each rows as row i}}
               <tr>
               	<td width="8%">{{row.id}}</td>
               	<td align="left" width="12%">{{row.name}}</td>
               	<td align="left" width="12%">{{row.num}}</td>
               	<td width="8%">{{row.enabled}}</td>
               </tr>
             {{/each}}
			</table>
		
		</div>
		<!--/列表-->
</script> 


<script type="text/javascript">
  
  $(function() {
	  
	  $('#tableContainer').gridTemplate({// 配置有很多，配置项未特殊说明均为非必填。详情请看read.me或者源码@_@
		  ajax:{
			  url: 'url...自己结合后台来',// 必填。
			  data:{}
		  },
		  pagination:{
			  pageSize:10,
			  page:1,
			  buttons:{
				  num:10
			  }
		  },
		  fitGridData:function(data){ // 适配数据
			  return data.data;
		  },
		  beforeRender:function(data,container){
			  //alert("装备模板数据前");
		  },
		  render:function(data,container){ // 必填。自己选择一种JS模板引擎，此处用的artTemplate
			  var html = template('tableTmpl', data);
			  container.html(html);
		  },
		  afterRender:function(data,container){
			  //alert("装备模板数据后");
		  }
		  
	  });
	  
	  
	   
  });
  </script>
 
</body>
</html>